<template>
  <el-row style="padding: 10px;">
    <el-col :span="6">
      <p style="font-size: 18px; color: #009688;">订单成交额：{{orderTotalPrice}}元</p>
    </el-col>
    <el-col :span="6">
      <p style="font-size: 18px; color: #08f10b;">订单数量：{{orderNumber}}</p>
    </el-col>
    <el-col :span="6">
      <p style="font-size: 18px; color: #e608ab;">用户数量：{{usersNumber}}</p>
    </el-col>
    <el-col :span="6">
      <p style="font-size: 18px; color: #e6432d;">商家数量：{{merchantsNumber}}</p>
    </el-col>
  </el-row>
  <el-row style="padding-top: 40px">
    <el-col :span="16">
      <div id="Productcategory" style="width: 800px;height:500px;"></div>
      <div id="productIsGroup" style="width: 300px;height:400px;"></div>
    </el-col>
    <el-col :span="8">
      <div id="userGender" style="width: 300px;height:400px;"></div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import {
  reqScreenUsersGender,
  reqScreenProductCategory,
  reqScreenProductIsGroup,
  reqScreenOrderTotalPrice, reqScreenOrderNumber, reqScreenUserNumber, reqScreenMarchantNumber
} from "@/api/screen";
const orderTotalPrice = ref(0);
const orderNumber = ref(0);
const usersNumber = ref(0);
const merchantsNumber = ref(0);
const Productcategory = ( async () => {
  var res =await reqScreenProductCategory();
  const keys = Object.keys(res.data);
  const values = Object.values(res.data);
  const myChart = echarts.init(document.getElementById('Productcategory'));
  const option = {
    title: {
      text: '商品分类'
    },
    tooltip: {},
    legend: {
      data: ['数量']
    },
    xAxis: {
      data:keys
    },
    yAxis: {},
    series: [
      {
        name: '数量',
        type: 'bar',
        data:values
      }
    ]
  };
  myChart.setOption(option);
})
const userGender = (async () => {
  var res = await reqScreenUsersGender();
  const myChart = echarts.init(document.getElementById('userGender'));
  const option = {
    title: {
      text: '男女比例'
    },
    series: [
      {
        type: 'pie',
        data: res.data
      }
    ]
  };
  myChart.setOption(option);
})
const productIsGroup = (async () => {
  var res = await reqScreenProductIsGroup();
  const myChart = echarts.init(document.getElementById('productIsGroup'));
  const option = {
    title: {
      text: '团购比例'
    },
    series: [
      {
        type: 'pie',
        data: res.data
      }
    ]
  };
  myChart.setOption(option);
})
const orderTotal = ( async() =>{
  var res = await reqScreenOrderTotalPrice();
  orderTotalPrice.value = res.data
})
const OrderNumber = ( async() =>{
  var res = await reqScreenOrderNumber();
  orderNumber.value = res.data
})
const UserNumber = ( async() =>{
  var res = await reqScreenUserNumber();
  usersNumber.value = res.data
})
const MerchantNumber = ( async() =>{
  var res = await reqScreenMarchantNumber();
  merchantsNumber.value = res.data
})
onMounted(() => {
  Productcategory();
  userGender();
  productIsGroup();
  orderTotal();
  OrderNumber();
  UserNumber();
  MerchantNumber();
});
</script>

<style scoped lang="scss">

</style>
